<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="UTF-8">
  <title>dom事件</title>
  <style>
    #test{
      width: 100px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body style="height: 200%">
  <div id="test">
    
  </div>
  <script>

    const testEle = document.querySelector('#test');
    document.addEventListener('scroll', function() {
      let style = testEle.getBoundingClientRect();
      console.log('scoll', style);
    }, true);
    window.addEventListener('click', function() {
      console.log('window catch');
    }, true);
    document.addEventListener('click', function() {
      console.log('document catch');
    }, true);

    document.documentElement.addEventListener('click', function() {
      console.log('html catch', this.style.width);
    }, true);

    document.body.addEventListener('click', function() {
      console.log('body catch');
    }, true);

    testEle.addEventListener('click', function() {
      let style1 = window.getComputedStyle(this);
      let style2 = this.getBoundingClientRect();
      console.log('dom catch', style1.width, style2);
    }, false);

    window.addEventListener('click', function() {
      console.log('window bubble');
    }, false);
    document.addEventListener('click', function() {
      console.log('document bubble');
    }, false);

    document.documentElement.addEventListener('click', function() {
      console.log('html bubble');
    }, false);

    document.body.addEventListener('click', function() {
      console.log('body bubble');
    }, false);

    var eve = new Event('custome');
    testEle.addEventListener('custome', function() {
      console.log('custome dispatch');
    });
    testEle.dispatchEvent(eve);

  </script>
</body>
</html>